﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="styles.css"/>
	<script type="text/javascript" src="lib/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="../html/html.js"></script>
	<script type="text/javascript" src="lib/raphael-min.js"></script>
	<script type="text/javascript" src="lib/popup.js"></script>
	<script type="text/javascript" src="rgraph.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#grPnl1").rgraph([
				[
					[1,2],
					[2,3],
					[4,4],
					[4.5,5],
					[5,5.5],
					[8,5.7],
					[13,8]
				],
				[
					[1,3],
					[2,3.5],
					[4,3.9],
					[4.5,5.2],
					[5, 4],
					[8,3.3],
					[13, 3]
				]
			],{
				backColor:null,
				viewTable: false,
				viewBackground: true,
				viewLegend: false
			});
			
			$("#grPnl2").rgraph([
				[
					[1,2],
					[2,3],
					[4,4],
					[4.5,5],
					[5,5.5],
					[8,5.7],
					[13,8]
				],
				[
					[1,3],
					[4,3.9],
					[4.5,5.2],
					[5, 4]
				]
			],{
				//backColor:"#e8e8ff",
				backColor:"90-#fff-#999",
				dotColor:"#ffc",
				viewTable: false,
				viewBackground: true,
				viewLegend: true,
				labels:[" ", "Январь", "Февраль", "Март", "Апрель", "Май"],
				rowSettings:[
					{
						name:"План",
						color:"#f00"
					},
					{
						name:"Факт",
						color:"#080"
					}
				]
			});
			
			// Пример сокращенного ввода данных - вводим только значения Y,
			// а X назначается автоматически по порядку 0,1,2,3...
			$("#grPnl3").rgraph([
				[10, 12, 14, 15, 18, 22, 24],
				[5, 7, 10, 14, 19, 19, 23]
			],{
				backColor:"90-#fff-#999",
				dotColor:"#ffc",
				viewTable: false,
				viewBackground: true,
				viewLegend: true,
				labels:["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль"],
				rowSettings:[
					{
						name:"План",
						color:"#f00"
					},
					{
						name:"Факт",
						color:"#080"
					}
				]
			});
			
			// пример графика с большими значениями
			$("#grPnl4").rgraph([
				[100, 110, 114, 115, 118, 122, 124],
				[105, 107, 110, 114, 119, 119, 123]
			],{
				backColor:"90-#fff-#999",
				dotColor:"#ffc",
				viewTable: false,
				viewBackground: true,
				viewLegend: true,
				labels:["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль"],
				rowSettings:[
					{name:"План", color:"#f00"},
					{name:"Факт", color:"#080"}
				]
			});
			
			// пример графика с пропущенными значениями
			$("#grPnl5").rgraph([
				[100, 110, 114, 115, 118, 122, 124],
				[105, 107, null, 114, 119]
			],{
				backColor:"90-#fff-#999",
				dotColor:"#ffc",
				viewTable: false, viewBackground: true, viewLegend: true,
				labels:["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль"],
				rowSettings:[
					{name:"План", color:"#f00"},
					{name:"Факт", color:"#080"}
				]
			});

			$("#grPnl6").rgraph([
				[
					[1.3,2.1],
					[2.1,3.1],
					[4.3,4.4],
					[4.5,5],
					[5.1,5.5],
					[8,5.7],
					[13,8]
				],
				[
					[1.6,3],
					[2.4,3.5],
					[4.2,3.9],
					[4.5,5.2],
					[5.3, 4],
					[8.1,3.3],
					[13.0, 3]
				]
			],{
				backColor:null,
				viewTable: false,
				viewBackground: true,
				viewLegend: false,
				axes:{
					x:{min:0, max: 15, step:5, title: "mm", format:function(v){return v+".";}},
					y:{min:0, max: 10, step:2, title: "Pa", format:function(v){return v+".00";}}
				}
			});

		});
	</script>
	<style type="text/css">
		.panel{
			margin-top:10px;
			width:750px;
			height:200px;
		}
	</style>
</head>
<body>
	<div class="panel" id="grPnl1"></div>
	<div class="panel" id="grPnl2"></div>
	<div class="panel" id="grPnl3"></div>
	<div class="panel" id="grPnl4"></div>
	<div class="panel" id="grPnl5"></div>
	<div class="panel" id="grPnl6"></div>
</body>
</html>
